/**
 * 每个模块的共同标题栏
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableWithoutFeedback
} from 'react-native';
let icon_cell_rightArrow = require('../../img/icon_cell_rightarrow.png');
import Icon from 'react-native-vector-icons/FontAwesome';
export default class BottomCommonCell extends Component {
    constructor(props){
        super(props);
        this.state={
            isShowRight:false
        }
    }

    componentWillMount(){
        if (this.props.fun!=null){
            this.setState({isShowRight:true})
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={()=>this.changeHaveFunction()}>
                <View style={styles.container}>
                    {/*左边*/}
                    <View style={styles.leftViewStyle}>
                        <Icon name={this.props.leftIcon} size={23} color="#FF0000" style={{marginRight:5}}/>
                        <Text style={{fontSize:17}}>{this.props.leftTitle}</Text>
                    </View>
                    {/*右边*/}
                    {this.state.isShowRight
                        ?<View style={styles.rightViewStyle}>
                            <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>

                            <Icon name="chevron-right" size={16} color="#A8A8A8"
                                  style={{ marginRight:8, marginLeft:5}}/>
                        </View>
                        :
                        null
                    }

                </View>
            </TouchableWithoutFeedback>
        );
    }
    changeHaveFunction(){
        if (!this.state.isShowRight){
            return
        }

        this.props.fun()
    }
}
BottomCommonCell.propTypes = {
    leftIcon: React.PropTypes.string,
    leftTitle: React.PropTypes.string,
    rightTitle: React.PropTypes.string,
    fun:React.PropTypes.func
};
BottomCommonCell.defaultProps = {
    leftIcon: '',
    leftTitle: '',
    rightTitle: '',
    fun:null
};


const styles = StyleSheet.create({
    container: {
        height: 44,
        flexDirection: 'row',
        backgroundColor: 'white',

        alignItems: 'center',

        // 设置对齐方式
        justifyContent: 'space-between',

        // 设置下边框
        borderBottomColor: '#e8e8e8',
        borderBottomWidth: 0.5
    },

    leftViewStyle: {
        // 改变主轴的方向
        flexDirection: 'row',
        alignItems: 'center',

        marginLeft: 8
    },

    rightViewStyle: {
        // 改变主轴的方向
        flexDirection: 'row',
        alignItems: 'center'
    }
});

